<template>
	<view>
		<!-- 01. 轮播区 -->
		<view class="swiper-area w-full pos-f">
			<swiper class="h-full pos-r" indicator-dots circular="true" duration="400">
				<swiper-item v-for="(item, index) in swiperDatas" :key="index">
					<view class="wh-full">
						<image :src="item.url" class="wh-full loaded" lazy-load="true" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 02. 商品数据区 -->
		<view class="goods-area bg-main padding">		
			<view class="price-box dflex-b">				
				<view>
					<text class="price fwb fs-big">{{ (goods.price * discount).toFixed(2) || '' }}</text>
					<text class="m-price" v-if="discount > 0 && discount < 1">{{ goods.price || '' }}</text>
				</view>				
				<view class="dflex fs-sm ft-dark">	
					<view class="dflex">
						<view class="padding-right-xs padding-right-xs">剩余库存</view>
						<text>{{ goods.inventory || '0' }}</text>
					</view>					
				</view>
			</view>
			<text class="title fs">{{ goods.title || '' }}</text>
		</view>
		<view class="gap"></view>
		<!-- 04.02 服务标签 -->
		<view class="bg-main padding-lr padding-top padding-bottom-xs pos-r" @click="tagShow = true">
			<view class="dflex dflex-wrap-w">
				<view v-for="(item, index) in tagDatas" :key="index" class="margin-right-sm margin-bottom-sm dflex">
					<view class="iconfont iconyiwancheng- fwb fs-xs ft-base margin-right-xs"></view>
					<text class="fs-xs">{{ item.name }}</text>
				</view>
			</view>
			<view class="icon-detail pos-a">
				<view class="iconfont iconxiangqing ft-dark fs-sm"></view>
			</view>
		</view>
		<view class="gap"></view>
		<!-- 04.02 服务标签弹出层 -->
		<use-popup mode="bottom" v-model="tagShow">
			<view class="tac w-full padding-sm">服务说明</view>
			<view class="padding-lr padding-bottom-sm">
				<view v-for="(item, index) in tagDatas" :key="index"
					class="margin-right-sm margin-bottom-sm dflex dflex-s">
					<view class="iconfont iconyiwancheng- fwb fs ft-base margin-right-xs"></view>
					<view>
						<view class="fs-sm">{{ item.name }}</view>
						<view class="fs-xs">服务标签对应的描述</view>
					</view>
				</view>
			</view>
		</use-popup>
		<!-- 06. 详情区 -->
		<view class="detail-area bg-main">
			<view class="d-header padding dflex-c"><text>图文详情</text></view>
			<rich-text class="pro-detail" :nodes="goods.decs"></rich-text>
		</view>

		<!-- 07. 操作区 -->
		<view class="oper-area pos-f dflex-b w-full padding-lr-sm">
			<view class="btn-area dflex dflex-flow-c" @click="tohome">
				<text class="iconfont iconshouye-1"></text>
				<text>首页</text>
			</view>		
			<view class="flex1 btn-container dflex-b border-radius-big">
				<view class="tac padding-tb-sm flex1 bg-warn" v-if="(goods.inventory) > 0" @click="tocart(goods)">加入购物车
				</view>
				<view class="tac padding-tb-sm flex1 bg-disabled" v-else>已售磐</view>
			</view>	
		</view>
		<!-- #ifdef MP-ALIPAY -->
		<view class="fixed-top dflex-c dflex-flow-c"><contact-button tnt-inst-id="0Xu_1aaW" scene="SCE00225456"
				size="50" color="#bbb" /></view>
		<!-- #endif -->

		<!-- 置顶 -->
		<use-totop ref="usetop" bottom="120"></use-totop>
	</view>
</template>

<script>
	// #ifdef MP-ALIPAY
	import aliParse from 'mini-html-parser2';
	// #endif

	import lPainter from '@/uni_modules/lime-painter/components/lime-painter/';
	

	import {
		queryProductDetail,
		queryAllProducts,
		createShoppingCart,
	} from '@/api/shopping.js';

	import {
		numberChange,
		getCartFunc,
	} from '@/pages/tabbar/cart.vue'

	import {
		mapState
	} from 'vuex';

	export default {
		components: {
			lPainter
		},
		computed: {
			...mapState(['islogin', 'member'])
		},
		data() {
			return {
				// 商品ID
				id: 0,
				// 分享ID
				mid: 0,
				// 商品数据
				goods: {},
				
				// 轮播图
				swiperDatas: [],

				//优惠券
				couponShow: false,
				// couponDatas: [],
				couponDatas: [],

				// 服务标签
				tagShow: false,
				// tagDatas: [],
				tagDatas: [{
					"name": "服装",
					"selected": true
				}, {
					"name": "假一赔四",
					"selected": false
				}, {
					"name": "极速退款",
					"selected": false
				}, {
					"name": "7天无理由退换",
					"selected": false
				}],
		
				// 商品详情
				html_nodes: '',
				scrollTop: 0,
				discount: 1,
			};
		},
		watch: {
			sku(e) {
				this.goods.price = e.price;
				this.goods.market_price = e.market_price;
				this.goods.stock_num = e.num;
			}
		},
		onShareAppMessage: function(ops) {
			let _this = this;
			let mid = 0;
			if (_this.member && _this.member._id) {
				mid = _this.member._id;
			}

			return {
				title: _this.goods.share_title,
				path: `/pages/goods/goods?id=${this.id}&mid=${mid}`, //这里设定都是以"/page"开头,并拼接好传递的参数
				success: function(res) {
					// 转发成功
					console.log('转发成功', res);
				},
				fail: function(res) {
					// 转发失败
					console.log('转发失败', res);
				}
			};
		},
		onPageScroll(e) {
			this.$refs.usetop.change(e.scrollTop);
		},
		async onLoad(options) {
			console.debug(options,"<================this.this.goods")
			console.debug(this.member,"<================this.member")
			console.debug(options.title,"<================this.goods.id")
			this.goods_id = options?.id ?? "1";
			this.discount = parseFloat(options?.discount ?? 1);
			this.queryProductDetailFunc();
		},
		onShow() {},

		methods: {
			async loadData() {},
			
			// 处理 query q 数据
			resolveQueryq(query) {
				const arr = query
					.split('/')
					.slice(-1)[0]
					.split('_');
				if (arr.length == 2) this.mid = arr[1];
				this.id = arr[0];
			},
	
			// 首页
			tohome() {
				this.$api.tohome();
			},

			// 加入购物车
			tocart(params) {
				if (!this.loginCheck()) return;
				this.addProductsCartFunc(params);
			},
			
			async addProductsCartFunc (params) {
				const response = await createShoppingCart({
					pid: params?.id,
					uid: this?.member.id,
					pcount: 1,
					sprice: (parseFloat(params?.price * this.discount).toFixed(2)),
					}).catch(()=>{});
				if(response?.code === 200) {
				this.$api.msg('加入购物车成功')
			
				
				}else {
					this.$api.msg('加入购物车失败')
					
				}
			},

			// 检测是否已登录
			loginCheck() {
				if (!this.islogin) {
					let _this = this;
					uni.showModal({
						title: '授权登录',
						success: function(res) {
							if (res.confirm) {
								_this.$api.tologin();
							}
						}
					});
					return false;
				}

				return true;
			},
			
				async queryProductDetailFunc () {
						const response = await queryProductDetail({id: this.goods_id}).catch(()=>{});
						if(response?.code === 200) {
							this.goods = response?.data ?? {};
							this.swiperDatas = response?.data?.defaultImg ? [{url: response.data.defaultImg }] : [];
						}else {
							this.goods = {};
						}
					},
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 120rpx;
	}

	contact-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50px;
		height: 50px;
	}

	.fixed-top {
		bottom: 230rpx;
	}

	/* 01. 轮播区 */
	.swiper-area {
		height: 720rpx;
		top: 0;
		z-index: -1;
	}

	/* #ifndef MP */
	.swiper-area {
		margin-top: calc(44px + env(safe-area-inset-top));
	}

	/* #endif */

	/* 02. 商品数据区 */
	.goods-area {
		margin-top: 720rpx;

		.price-box {
			display: flex;
			align-items: baseline;
		}

		.title {
			color: $font-color-dark;
			height: 46rpx;
			line-height: 46rpx;
		}
	}

	.share-area {
		.vertical-line {
			right: 50%;
			height: 40%;
		}
	}

	/* 03. 规格区 */
	.sku-area .active {
		background: $base-color;
		color: #fff !important;
	}

	/* 04. 服务区 */
	.icon-detail {
		right: 30rpx;
		top: 24rpx;
	}

	/* 05. 评价 */
	.evaluate-area {
		.portrait {
			flex-shrink: 0;
			width: 80rpx;
			height: 80rpx;
		}

		.right-area {
			image {
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				height: 200rpx;
				width: 30%;
			}
		}
	}

	/* 06. 详情区 */
	.detail-area {
		.d-header {
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;

			text {
				padding: 0 20rpx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300rpx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}

		/* 产品详情 */
		.pro-detail {
			width: 100%;
			overflow: hidden;
			-webkit-touch-callout: none;

			img {
				width: 100%;
				max-width: 100%;
				overflow: hidden;
			}
		}
	}

	/* 07. 操作区 */
	.oper-area {
		left: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0 0 20rpx 0 #f0f0f0;
		height: 100rpx;
		z-index: 95;

		.btn-area {
			font-size: $font-sm;
			color: $font-color-base;
			width: 96rpx;

			.iconfont {
				font-size: 40rpx;
				line-height: 48rpx;
			}
		}
	}

	/* 优惠券区 */
	.coupon-area {
		max-height: 60vh;
		min-height: 30vh;

		.coupon-item {
			margin-bottom: 20rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.content {
				&:after {
					position: absolute;
					left: 0;
					bottom: 0;
					content: '';
					width: 100%;
					height: 0;
					border-bottom: 1px dashed #f3f3f3;
					transform: scaleY(50%);
				}
			}

			.circle {
				position: absolute;
				bottom: -10rpx;
				z-index: 10;
				width: 20rpx;
				height: 20rpx;
				background: #f5f5f5;
				border-radius: 50%;

				&.r {
					right: -6rpx;
				}

				&.l {
					left: -6rpx;
				}
			}
		}
	}
</style>